<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网格布局-Layout</title>

  <style>
    * { 
      margin: 0;
      padding: 0;
    }
    html, body, #app {
      width: 100%;
      height: 100%;
      background-color: #fafbfe;
    }

    #app {
      display: grid;
      grid-template-columns: 180px 1fr;
      grid-template-rows: 48px 42px 1fr;
      grid-template-areas: 
      "aside header"
      "aside tabs"
      "aside main";
      overflow: hidden;
    }



    .main { 
      background-color: #ffffff;
      grid-area: main;
      padding: 12px;
      box-sizing: border-box;
      overflow: hidden;
      overflow-y: auto;
    }
    .main .scroll-wrap-x {
      height: 500px;
      overflow-x: auto;
      display: grid;
      grid-gap: 10px;
      grid-template-rows: repeat(3, 1fr);
      grid-auto-flow: column;
      grid-template-columns: repeat(2, 200px);
      grid-auto-columns: minmax(100px, 1fr);
      grid-template-areas: "a b" "a b";
    }
    .main .scroll-wrap-x .scroll-item {
      background-color: #446cc0;
      border-radius: 8px;
    }
    .main .scroll-wrap-x .scroll-item.a {
      grid-area: a;
    }

    .main .scroll-wrap-x .scroll-item.b {
      grid-area: b;
    }

    .main .scroll-wrap-y { 
      width: 600px;
      height: calc(100% - 500px - 20px);
      margin-top: 20px;
      overflow-y: auto;
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: minmax(50px, 1fr);
      grid-auto-flow: row dense;
    }

    .main .scroll-wrap-y .scroll-y-item {
      background-color: #446cc0;
      border-radius: 4px;
    }

    .main .scroll-wrap-y .scroll-y-item:nth-child(-n + 3) {
      grid-column: 1 / span 2;
    }
    .main .scroll-wrap-y .scroll-y-item:last-child {
      order: -1;
      grid-column: 1 / span 2;
    }


    .header {
      background-color: #446cc0;
      grid-area: header;
    }
    .aside {
      background: radial-gradient(102.22% 24.02% at 100% 0%, rgba(36, 145, 255, 0.2) 0%, rgba(0, 122, 245, 0) 100%), radial-gradient(107.5% 39.69% at 50% 100%, #3F91F7 0%, rgba(0, 127, 255, 0) 100%), radial-gradient(62.73% 62.73% at 107.5% 37.27%, #2478E4 0%, #007AF5 100%);
      grid-area: aside;
      /* display: flex;
      flex-direction: column;
      justify-content: space-between; */
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 48px 1fr;
      grid-template-areas: 
      "logo"
      "content";
    }
    .aside .logo {
      /* height: 48px; */
      background-color: green;
      grid-area: logo;
    }
    .aside .content {
      /* flex: 1; */
      background-color: red;
      grid-area: content;
    }
    .tabs {
      background-color: #ececec;
      grid-area: tabs
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="main">
      <ul class="scroll-wrap-x">
        <li class="scroll-item a">a</li>
        <li class="scroll-item b">b</li>
        <li class="scroll-item">1</li>
        <li class="scroll-item">2</li>
        <li class="scroll-item">3</li>
        <li class="scroll-item">4</li>
        <li class="scroll-item">5</li>
        <li class="scroll-item">6</li>
        <li class="scroll-item">7</li>
        <li class="scroll-item">8</li>
        <li class="scroll-item">9</li>
        <li class="scroll-item">10</li>
        <li class="scroll-item">11</li>
        <li class="scroll-item">12</li>
        <li class="scroll-item">13</li>
        <li class="scroll-item">14</li>
        <li class="scroll-item">15</li>
        <li class="scroll-item">16</li>
        <li class="scroll-item">17</li>
        <li class="scroll-item">18</li>
        <li class="scroll-item">19</li>
        <li class="scroll-item">20</li>
        <li class="scroll-item">21</li>
        <li class="scroll-item">14</li>
        <li class="scroll-item">15</li>
        <li class="scroll-item">16</li>
        <li class="scroll-item">17</li>
        <li class="scroll-item">18</li>
        <li class="scroll-item">19</li>
        <li class="scroll-item">20</li>
        <li class="scroll-item">21</li>
        <li class="scroll-item">22</li>
        <li class="scroll-item">23</li>
      </ul>

      <ul class="scroll-wrap-y">
        <li class="scroll-y-item">1</li>
        <li class="scroll-y-item">2</li>
        <li class="scroll-y-item">3</li>
        <li class="scroll-y-item">4</li>
        <li class="scroll-y-item">5</li>
        <li class="scroll-y-item">6</li>
        <li class="scroll-y-item">7</li>
        <li class="scroll-y-item">8</li>
        <li class="scroll-y-item">9</li>
        <li class="scroll-y-item">10</li>
        <li class="scroll-y-item">11</li>
        <li class="scroll-y-item">12</li>
        <li class="scroll-y-item">13</li>
        <li class="scroll-y-item">14</li>
        <li class="scroll-y-item">15</li>
        <li class="scroll-y-item">16</li>
        <li class="scroll-y-item">17</li>
        <li class="scroll-y-item">18</li>
        <li class="scroll-y-item">19</li>
        <li class="scroll-y-item">20</li>
        <li class="scroll-y-item">21</li>
        <li class="scroll-y-item">22</li>
      </ul>
    </div>
    <div class="header">header</div>
    <div class="aside">
      <div class="logo">logo</div>
      <div class="content">aside</div>
    </div>
    <div class="tabs">tabs</div>
  </div>
</body>
</html>